<template>
	<view class="adopt">
		<view class="scroll-bar">
			<u-tabs-swiper 
				ref="tabs"
				:list="list" 
				active-color="#FF9A00" 
				inactive-color="#606266" 
				font-size="30" 
				:current="currentIndex"
				:is-scroll="false"
				height="88"
				@change="tabChange"></u-tabs-swiper>
		</view>
		<scroll-view scroll-y="true"
					 class="scroll-Y">
			<view class="adopt-item">
				<view class="item" v-for="(item, index) in adoptList" :key="index">
					<view class="item-context">
						<view @click="petClick(item.pid)"><image style="width: 88rpx; height: 88rpx;border-radius: 100%;" :src="item.avatar" shape="circle" mode="aspectFill"></image></view>
						<view class="item-info">
							<view class="info-nickname" @click="petClick(item.pid)">{{item.name}}</view>
							<view class="info-base">
								<view v-if="item.sex === 1" class="base-sex" style="background-color: rgba(0, 149, 255, 0.08);">
									<u-icon name="man" color="#0095FF" size="25"></u-icon>
								</view>
								<view v-if="item.sex === 2" class="base-sex" style="background-color: rgba(255, 128, 128, 0.08);">
									<u-icon name="woman" color="#FF8080" size="25"></u-icon>
								</view>
								<view class="base-variety">{{item.typeName}}</view>
								<view class="base-age">{{item.age}}岁</view>
							</view>
						</view>
						<!-- 获取领养码 -->
						<view v-if="currentIndex === 3" class="context-operation">
							<view v-if="item.type === 1">
								<view class="context-icon"><image style="width: 36rpx; height: 36rpx;" src="@/static/user/current3.png" shape="circle"></image></view>
								<view class="context-btn" @click="gainClick(item.id)">获取领养码</view>
							</view>
							<view v-else>
								<view class="context-icon"><image style="width: 36rpx; height: 36rpx;" src="@/static/user/current3.png" shape="circle"></image></view>
								<view class="context-btn" @click="verifyClick(item.agreementId)">验证领养码</view>
							</view>
						</view>
					</view>
					<view v-if="currentIndex !== 3" class="item-operation">
						<view class="operation-btn">
							<!-- 灰色按钮 -->
							<view class="btn" v-if="currentIndex === 0">
								<view class="btn1" @click="revocationClick(item.adoptId)">撤销</view>
								<view class="btn1">修改</view>
							</view>
							<view class="btn" v-if="currentIndex === 1">
								<view class="btn1" @click="cancelClick(item.applyId)">取消申请</view>
							</view>
							<view class="btn" v-if="currentIndex === 2">
								<view class="btn1" v-if="item.type === 1" @click="reelectClick(item.adoptId)">重选</view>
								<view class="btn3" @click="phoneClick(item.masterPhone)">电话</view>
								<view class="btn4" @click="enterChat(item.masterUid, 'private', index)">私信</view>
							</view>
							<view class="btn" v-if="currentIndex === 4">
								<view class="btn1" @click="delClick(item.agreementId)">删除</view>
							</view>
							<!-- 黄色按钮 -->
							<view class="btn-icon"  v-if="currentIndex === 0">
								<view class="icon-sum"><view class="sum-num">{{item.applyCount}}</view></view>
								<view class="btn2" @click="proposerClick(item.adoptId)">申请人</view>
							</view>
							<view class="btn-icon"  v-else-if="currentIndex === 1">
								<view class="btn2" @click="enterChat(item.masterUid, 'private', index)">私信</view>
							</view>
							<view class="btn-icon"  v-else-if="currentIndex === 2">
								<view class="icon"><image style="width: 36rpx; height: 36rpx;" src="@/static/user/current2.png" shape="circle"></image></view>
								<view class="btn2" @click="signClick(item.agreementId)">领养协议</view>
							</view>
							<view class="btn-icon"  v-else-if="currentIndex === 4">
								<view class="btn2" @click="comClick(item.agreementId)">领养协议</view>
							</view>
						</view>
						<!-- 通知 -->
						<view class="operation-inform" v-if="currentIndex !== 4">
							<view><image style="width: 34rpx; height: 34rpx;" src="@/static/user/inform.png" shape="circle"></image></view>
							<view class="inform-text" v-if="currentIndex === 0">已有{{item.applyCount}}人申请了领养，等待挑选。</view>
							<view class="inform-text" v-else-if="currentIndex === 1">已有{{item.hasCount}}人申请了领养，等待挑选。</view>
							<view v-else>
								<view class="inform-text" v-if="item.type === 0">恭喜,你被选中啦！请尽快签署领养协议。</view>
								<view class="inform-text" v-else>你已选中领养人了,请尽快签署领养协议。</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="adopt-empty" v-if="adoptList.length === 0 && loading === false">
				<image style="width: 542rpx; height: 316rpx;" src="@/static/user/none1.png"></image>
				<view class="empty-text">暂无数据~</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data () {
			return {
				list: [
					{ name: '我的发布' },
					{ name: '我的申请' },
					{ name: '领养协议' },
					{ name: '领养码' },
					{ name: '已完成' }
				],
				currentIndex: 0, // 滑动导航栏的current值，表示当前活动的tab选项
				adoptList: [],
				loading: true
			}
		},
		methods: {
			enterChat (uuid, type, i) {//进入私聊
			console.log('999999999')
			console.log(uuid, type, i)
				if(uni.getStorageSync('login')){
					uni.setStorageSync('objUuid',uuid)
					let self = this
					let data = uni.getStorageSync('masterList')
					let dataLists = JSON.parse(data)
					dataLists.forEach(item=>{
						if(item.uuid == self.adoptList[i].masterUid){
							let path = type === self.GoEasy.IM_SCENE.PRIVATE
									? '../../../pages/chat/privateChat/privateChat?to=' + item.uuid
									: '../../../pages/chat/privateChat/privateChat?to=' + item.uuid;
							uni.navigateTo({
								url: path
							})
						}
					})
				}else{
					uni.navigateTo({
						url: '../../user/login/index'
					})
				}
			},
			// 顶部滑动导航栏的点击
			tabChange (index) {
				this.currentIndex = index
				this.currentIndexChange(index)
			},
			// 申请人按钮的点击
			proposerClick (adoptId) {
				uni.navigateTo({
				    url: './sub/proposers?adoptId=' + adoptId
				});
			},
			// 签署领养协议按钮的点击
			signClick (agreementId) {
				uni.navigateTo({
				    url: '../../index/agreement/petAgreement?agreementId=' + agreementId
				});
			},
			// 已完成领养协议按钮的点击
			comClick (agreementId) {
				uni.navigateTo({
				    url: '../compete/compete?agreementId=' + agreementId
				});
			},
			// 撤销按钮的点击
			revocationClick (adoptId) {
				this.postCancel(adoptId)
			},
			// 取消申请按钮的点击
			cancelClick (applyId) {
				this.applyCancel(applyId)
			},
			// 电话按钮的点击
			phoneClick (phone) {
				uni.makePhoneCall({
				    phoneNumber: phone //仅为示例
				});
			},
			// 重选按钮的点击
			reelectClick (adoptId) {
				uni.showModal({
				    title: '提示',
				    content: '确定要重新选择领养人吗?',
				    success: function (res) {
				        if (res.confirm) {
							uni.navigateTo({
							    url: './sub/proposers?adoptId=' + adoptId + '&reelect=' +true
							});
				        }
				    }
				})
			},
			// 获取领养码按钮的点击
			gainClick (id) {
				uni.navigateTo({
				    url: '../../index/adoptCode/adoptCode?gain=' + true +'&id=' + id
				});
			},
			// 验证领养码按钮的点击
			verifyClick (agreementId) {
				uni.navigateTo({
				    url: '../../index/adoptCode/adoptCode?agreementId=' + agreementId
				});
			},
			// 删除按钮的点击
			delClick (agreementId) {
				this.agreeDel(agreementId)
			},
			// 宠物主页跳转
			petClick (pid) {
				url: uni.navigateTo({
					url: '../../../pages/pet/home/home?id=' + pid
				})
			},
			currentIndexChange (index) {
				switch(index) {
					case 0: // 我的发布
						this.adoptList = []
						this.getAdoptPostList()
						break;
					case 1: // 我的申请
						this.adoptList = []
						this.getAdoptApplyList()
						break;
					case 2: // 领养协议
						this.adoptList = []
						this.getAdoptaAreList()
						break;
					case 3: // 领养码
						this.adoptList = []
						this.getAdoptaVerList()
						break;
					case 4: // 已完成
						this.adoptList = []
						this.getAdoptaComList()
						break;
				}
			},
			// 加载中
			showLoading () {
				this.loading = true
				uni.showLoading({
				    title: '正在加载中',
					mask: true
				});
			},
			// 加载成功
			hideLoading () {
				uni.showToast({
				    title: '加载成功',
					icon: 'success',
					mask: true,
					complete: () =>{
						uni.hideLoading();
						this.loading = false
					}
				});
			},
			// 获取我的发布列表
			async getAdoptPostList () {
				this.showLoading()
				await this.$request(this.commonApi.adoptPostList, 'GET').then(res => {
					let items = res.data
					if (items.code !== 200) {
						uni.showToast({
							title: items.msg,
							icon: 'none'
						})
					} else {
						this.hideLoading()
						this.adoptList = items.data
					}
				})
			},
			// 获取我的申请列表
			async getAdoptApplyList () {
				this.showLoading()
				await this.$request(this.commonApi.adoptApplyList, 'GET').then(res => {
					let items = res.data
					if (items.code !== 200) {
						uni.showToast({
							title: items.msg,
							icon: 'none'
						})
					} else {
						this.hideLoading()
						this.adoptList = items.data
					}
				})
			},
			// 获取我的协议列表
			async getAdoptaAreList () {
				this.showLoading()
				await this.$request(this.commonApi.adoptAreList, 'GET').then(res => {
					let items = res.data
					if (items.code !== 200) {
						uni.showToast({
							title: items.msg,
							icon: 'none'
						})
					} else {
						this.hideLoading()
						this.adoptList = items.data
					}
				})
			},
			// 获取领养码列表
			async getAdoptaVerList () {
				this.showLoading()
				await this.$request(this.commonApi.adoptVerList, 'GET').then(res => {
					let items = res.data
					if (items.code !== 200) {
						uni.showToast({
							title: items.msg,
							icon: 'none'
						})
					} else {
						this.hideLoading()
						this.adoptList = items.data
					}
				})
			},
			// 获取已完成列表
			async getAdoptaComList () {
				this.showLoading()
				await this.$request(this.commonApi.adoptComList, 'GET').then(res => {
					let items = res.data
					if (items.code !== 200) {
						uni.showToast({
							title: items.msg,
							icon: 'none'
						})
					} else {
						this.hideLoading()
						this.adoptList = items.data
					}
				})
			},
			// 撤销发布领养
			postCancel (adoptId) {
				let that = this
				uni.showModal({
				    title: '提示',
				    content: '确定要撤销发布吗?',
				    success: function (res) {
				        if (res.confirm) {
							that.$request(that.commonApi.adoptPostCancel + adoptId, 'POST').then(res => {
								let items = res.data
								if (items.code !== 200) {
									uni.showToast({
										title: items.msg,
										icon: 'none'
									})
								} else {
									uni.showToast({
										title: '撤销成功',
										icon: 'none'
									})
									that.getAdoptPostList()
								}
							})
				        }
				    }
				})
			},
			// 撤销申请领养
			applyCancel (applyId) {
				let that = this
				uni.showModal({
				    title: '提示',
				    content: '确定要取消领养吗?',
				    success: function (res) {
						console.log(res)
				        if (res.confirm) {
							that.$request(that.commonApi.adoptApplyCancel + applyId, 'POST').then(res => {
								let items = res.data
								if (items.code !== 200) {
									uni.showToast({
										title: items.msg,
										icon: 'none'
									})
								} else {
									uni.showToast({
										title: '取消成功',
										icon: 'none'
									})
									that.getAdoptApplyList()
								}
							})
				        }
				    }
				})
			},
			// 删除已完成领养协议
			agreeDel (agreementId) {
				let that = this
				uni.showModal({
				    title: '提示',
				    content: '确定要删除这条已完成领养协议吗?',
				    success: function (res) {
						console.log(res)
				        if (res.confirm) {
							that.$request(that.commonApi.comDelete + agreementId, 'POST').then(res => {
								let items = res.data
								if (items.code !== 200) {
									uni.showToast({
										title: items.msg,
										icon: 'none'
									})
								} else {
									uni.showToast({
										title: '删除成功',
										icon: 'none'
									})
									that.getAdoptaComList()
								}
							})
				        }
				    }
				})
			}
		},
		onLoad (option) {
			this.currentIndex = parseInt(option.index)
			this.currentIndexChange(this.currentIndex)
		},
		onBackPress(e) {
			console.log(e);
			uni.navigateTo({
				url:"../../../pages/index/index"
			}) 
			return true
		}
	}
</script>

<style lang="scss" scoped>
	.adopt {
		height: 100vh;
		.scroll-bar {
			/deep/ .u-tabs-scroll-box {
				display: flex;
				justify-content: space-around;
			}
			position: relative;
			top: 0;
			left: 0;
		}
		.scroll-Y {
			height: calc(100vh - 90rpx);
			border-top: 2rpx solid #f9f9f9;
		}
		.adopt-item {
			.item {
				background-color: #fff;
				padding: 20rpx 30rpx;
				border-radius: 12rpx;
				border-bottom: 2rpx solid #F9F9F9;
				.item-context {
					display: flex;
					align-items: center;
					.item-info {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						margin-left: 20rpx;
						flex: 5;
						.info-nickname {
							font-size: 28rpx;
							font-weight: 600;
							color: #333333;
							line-height: 40rpx;
							margin-bottom: 12rpx;
						}
						.info-base {
							display: flex;
							margin-bottom: 12rpx;
							.base-sex {
								width: 36rpx;
								height: 36rpx;
								background: rgba(0, 149, 255, 0.08);
								border-radius: 2px;
								display: flex;
								justify-content: space-evenly;
							}
							.base-variety {
								height: 36rpx;
								background: rgba(255, 154, 0, 0.08);
								border-radius: 4rpx;
								font-size: 24rpx;
								font-weight: 400;
								color: #FF9A00;
								line-height: 32rpx;
								display: flex;
								align-items: cneter;
								justify-content: center;
								padding: 2rpx 18rpx;
								margin: 0 18rpx;
							}
							.base-age {
								height: 36rpx;
								background: rgba(131, 86, 243, 0.08);
								border-radius: 4rpx;
								font-size: 24rpx;
								font-weight: 400;
								color: #8356F3;
								line-height: 32rpx;
								display: flex;
								align-items: cneter;
								justify-content: center;
								padding: 2rpx 18rpx;
							}
						}
					}
					.context-operation {
						position: relative;
						width: 200rpx;
						height: 60rpx;
						display: flex;
						align-items: flex-end;
						.context-icon {
							position: absolute;
							top: 0;
							right: 8rpx;
						}
						.context-btn {
							width: 180rpx;
							height: 48rpx;
							background: #FF9A00;
							border-radius: 28rpx;
							font-size: 26rpx;
							font-weight: 500;
							color: #FFFFFF;
							line-height: 48rpx;
							text-align: center;
						}
					}
				}
				.item-operation {
					display: flex;
					flex-direction: column;
					.operation-btn {
						display: flex;
						justify-content: space-between;
						margin: 10rpx 0 26rpx 0;
						.btn {
							display: flex;
							align-items: flex-end;
							.btn1 {
								height: 48rpx;
								background: #fff;
								border-radius: 28rpx;
								border: 2rpx solid #CCCCCC;
								font-size: 26rpx;
								font-weight: 400;
								color: #333333;
								line-height: 44rpx;
								margin-right: 30rpx;
								padding: 0 20rpx;
							}
							.btn3 {
								width: 120rpx;
								height: 48rpx;
								background: #EBF7FF;
								border-radius: 28rpx;
								font-size: 26rpx;
								font-weight: 400;
								color: #333333;
								line-height: 48rpx;
								text-align: center;
								margin-right: 30rpx;
							}
							.btn4 {
								width: 120rpx;
								height: 48rpx;
								background: #FFF7EB;
								border-radius: 28rpx;
								font-size: 26rpx;
								font-weight: 400;
								color: #333333;
								line-height: 48rpx;
								text-align: center;
							}
						}
						.btn-icon {
							height: 60rpx;
							display: flex;
							align-items: flex-end;
							position: relative;
							.icon-sum {
								width: 36rpx;
								height: 36rpx;
								background-color: #fff;
								border-radius: 50%;
								display: flex;
								align-items: center;
								justify-content: center;
								position: absolute;
								top: 0;
								right: 0;
								.sum-num {
									width: 32rpx;
									height: 32rpx;
									background-color: #FF9A00;
									border-radius: 50%;
									font-size: 24rpx;
									font-weight: 400;
									color: #FFFFFF;
									line-height: 32rpx;
									text-align: center;
								}
							}
							.icon {
								position: absolute;
								top: 0;
								right: 0;
							}
							.btn2 {
								height: 48rpx;
								background: #FF9A00;
								border-radius: 24rpx;
								font-size: 28rpx;
								font-weight: 500;
								color: #FFFFFF;
								line-height: 48rpx;
								padding: 0 40rpx;
								margin-right: 16rpx;
							}
						}
					}
					.operation-inform {
						width: 690rpx;
						height: 64rpx;
						background: #F6F6F6;
						border-radius: 4rpx;
						display: flex;
						align-items: center;
						padding-left: 20rpx;
						.inform-text {
							font-size: 28rpx;
							font-weight: 400;
							color: #999999;
							line-height: 40rpx;
							margin-left: 20rpx;
						}
					}
				}
			}
		}
		.adopt-empty {
			padding: 100rpx 0 0 100rpx;
			.empty-text {
				font-size: 32rpx;
				font-weight: 500;
				color: #333333;
				line-height: 44rpx;
				letter-spacing: 2rpx;
				padding-left: 200rpx;
				padding-top: 60rpx;
			}
		}
	}
</style>
